const tool = require('./tool.js') //获得工具类
const webpack = require('webpack') //获得webpack实例为了使用webpack提供的功能
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const baseWebpackConfig = require('./webpack.config.js');

const devConfig = (siteName) => {
    var config = merge(baseWebpackConfig(siteName), {
        mode: 'development', // development
        devServer: {
            https: false,
            index: 'webpackGuidance.html',
            hot: true,
            watchContentBase: true,
            overlay: { warnings: true, errors: true },
            compress: true,
            open: true,
            proxy: {},
            contentBase: [ './src/**' ]
        },
        module: {
            rules: [
                {
                    test: /\.less$/,
                    // use: ['style-loader', 'css-loader', 'less-loader'],
                    use: [
                        'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true,
                                importLoaders: 1
                            }
                        },
                        tool.postcssConfig,
                        {
                            loader: 'less-loader',
                            options: {
                                sourceMap: true,
                                strictMath: true,
                                strictUnits: true
                            }
                        }
                    ]
                }
            ]
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            ...tool.getTpl(siteName).map(file => {
                if (file.filename === 'webpackGuidance'){
                    return new HtmlWebpackPlugin({
                        template: file.path,
                        filename: file.filename + '.html',
                        inject: false
                    });
                }
                return new HtmlWebpackPlugin({
                    template: file.path,
                    filename: file.filename + '.html',
                    chunks: ['main', 'vendor' || null], //这里引入公共文件main.js，另外一个文件按需引入，当然也可以把这个的值设为数组，传入function的第二个值用数组就行,引入分离后的第三方文件
                    chunksSortMode: 'manual', //将chunks按引入的顺序排序
                    inject: true //所有JavaScript资源插入到body元素的底部
                })
            }),
        ],
        devtool: '#eval-source-map'
    });
    return config;
};

module.exports = devConfig;
